@import '@/style/mixin.scss';
/* ------------------- 1.主要 ------------------- */
/* 1.1 页面默认背景色  */
page {
	background-color: #fff;
}

/* 1.2 图片block 处理 */
view,
page,
text,
button,
image,
textarea,
scroll-view,input {
	box-sizing: border-box;
}
image {
	display: block;
}
/* 1.3 容器  默认字体 */
.container {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	font-family: '微软雅黑';
	font-size: 24rpx;
	color: #272729;
	line-height: 1.5;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}

.safeBottom {
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}

/* 只有在 真机上才能获取 */
 // 1.4 状态栏 高度 与 导航栏 高度
.sys-StatusHeight {
	width: 100%;
	height: var(--status-bar-height);
}

.sys-StatusNavHeight {
	width: 100%;
	height: calc(44px + var(--status-bar-height));
}

/* 1.5 横竖 排列*/
.all-row {
	display: flex;
	flex-direction: row;
}

.all-col {
	display: flex;
	flex-direction: column
}

.all-cs {
	align-items: center;
	justify-content: space-between;
}

.all-cc {
	align-items: center;
	justify-content: center;
}
//1.6 主题
// 背景色
.themeBgColor {
	background-color: $themeColor;
}
// 主题字体色
.themeFontColor {
	color: $themeColor !important;
}
/* ------------------- 1.主要end ------------------- */

/* ------------------- 2. btn ------------------- */
button::after {
	border: none;
}

.clearBtn {
	line-height: 1.5;
	text-align: center;
	font-weight: normal;
	padding: 0;
	margin: 0;
	border-radius: 0;
	color: #000000;
	/* background-color: #fff; */
}

/* 2.1 按钮 点击后 阴影样式 */
.btn-hover {
	background-color: #c06d3d !important;
	/* position: relative;
  top: 3rpx;
  box-shadow: 0px 0px 8px #999 inset; */
}

.btn-hover-text {
	color: #999 !important;
}

/* 2.0 长条按钮 */
.comBtn {
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 40rpx;
	font-size: 28rpx;
	color: white;
	background-color: #ff782b;
}



/* ------------------- 2. btn end ------------------- */
/* ------------------- 3.文字 ------------------- */
/* 1.文字 */

.com-text-one {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	word-break: break-all;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	/* 以下 代码 主要只为了适配 scroll-view 中换行问题 */
	white-space: normal !important;
}


.com-text-two {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	word-break: break-all;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	/* 以下 代码 主要只为了适配 scroll-view 中换行问题 */
	white-space: normal !important;
}

.com-text-three {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	word-break: break-all;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	/* 以下 代码 主要只为了适配 scroll-view 中换行问题 */
	white-space: normal !important;
}

/* ------------------- 2.文字 end ------------------- */

/* ------------------- 3.常用动画 ------------------- */
/* 3.1 蒙层 遮罩层  */
/* 3.1.1 蒙层 遮罩层 */
.maskLayer {
	width: 100%;
	height: 100vh;
	position: fixed;
	z-index: 200;
	background: rgba(0, 0, 0, 0.3);
}

.maskLayer-show {
	animation: maskLayer-show-ani 0.5s ease;
}

.maskLayer-hide {
	top: 100vh;
	animation: maskLayer-hide-ani 0.5s ease;
}

@keyframes maskLayer-show-ani {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes maskLayer-hide-ani {
	0% {
		opacity: 1;
	}

	100% {
		top: 100vh;
		opacity: 0;
	}
}


/* 3.1.2 遮罩层 flex 布局 居中 */
.maskLayer-flex {
	width: 100%;
	height: 100%;
	position: fixed;
	align-items: center;
	justify-content: center;
	z-index: 200;
	background: rgba(0, 0, 0, .3);

}


/*3.1 右箭头 大小 */
.cRightArrow {
	width: 30rpx;
	height: 30rpx;
	/* background-color: orange; */
}

/*  3.2 箭头 上下旋转*/
.arrow-up {
	transition: all .5s;
	transform: rotate(180deg);
}

.arrow-down {
	transition: all .5s;
	transform: rotate(360deg);
}


/* 3.2 底部白色 留白 */
.xbottomBar {
	width: 100%;
	background-color: white;
	position: fixed;
	height: 10rpx;
	bottom: 0;
}

/* ------------------- 3.常用动画 end------------------- */

/* ------------------- 4.其他------------------- */

/* 4.主色色值*/
.mColor-blue {
	color: #19a0f1;
}

.mColor-red {
	color: #e10000;
}

.mColor-gray {
	color: #999999;
}

.mBorder {
	border: 1rpx solid #dcdcdc;
}

.mBorder-bot {
	border-bottom: 1rpx solid #dcdcdc;
}

.com-bs {
	background-image: linear-gradient(to right, #20ca60, #14ab58);
	box-shadow: 0 10rpx 20rpx #8dcaa4;
}

/* ------------------- 4. 其他 end ------------------- */
